<template>
  <div>
    <mt-popup v-model="visible" class="add-channel-pop">
      <p class="add-channel-pop-title">请输入要新增的渠道商信息</p>
      <div class="add-channel-pop-form">
        <div class="channel-name from-wrap">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/name.png" alt="">
          <input type="text" placeholder="请输入渠道商姓名" v-model="team.name">
        </div>
      </div>
      <div class=" add-channel-pop-form">
        <div class="channel-name from-wrap">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/phoneNumber.png" alt="" style="width:0.8rem">
          <input type="text" placeholder="请输入手机号" v-model="team.phone">
        </div>
      </div>
      <div class="add-channel-pop-submit" @click="submit">
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrowRight.png" alt="">
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Popup } from 'mint-ui';
import { mapActions } from 'vuex';
import { checkPhone, checkZhName, checkpw } from 'common/utils'
import { MessageBox, Indicator, Toast } from 'mint-ui';
export default {
  props: ['popupVisible'],
  data() {
    return {
      visible: false,
      team: {
        name: '',
        phone: ''
      },
    };
  },
  mounted() {},
  watch: {
    popupVisible(val, oldVal) {
      console.log(val, oldVal)
      this.visible = val;
    },
    visible(val) {
      this.$emit("on-result-change", val);
    }
  },
  methods: {
    ...mapActions({
      channelApply: 'ChannelApply'
    }),
    clearTeam() {
      this.visible = false
      this.team = {
        name: '',
        phone: ''
      }
    },
    submit() {
      if (!checkZhName(this.team.name)) {
        Toast('请先填写真实姓名');
        return false;
      }
      if (!checkPhone(this.team.phone)) {
        Toast('请先填写正确的手机号！');
        return false;
      }
      Indicator.open();
      this.channelApply({ phone: this.team.phone, userName: this.team.name }).then(result => {
        let opt = this;
        Indicator.close();
        MessageBox.alert("您的团队申请成功，请等待后台审核！", '温馨提示').then(action => {
          opt.clearTeam();
        });
      }).catch(msg => {
        Indicator.close();
        Toast(msg);
      })
    }
  }
}

</script>
<style lang="less">
.add-channel-pop {
  width: 15rem;
  height: 13.5rem;
  background: #FAFAFA;
  box-shadow: 4px 4px 12px 0 rgba(63, 65, 70, 0.60);
  border-radius: 15px;
  padding: 1rem;
  color: rgba(32, 67, 106, 0.60);
  .add-channel-pop-title {
    font-size: 0.6rem;
    color: #20436A;
    line-height: 1rem;
    font-weight: bold;
  }
  .add-channel-pop-form {
    line-height: 1.5rem;
    background: #FFFFFF;
    border: 1px solid rgba(32, 67, 106, 0.20);
    border-radius: 5px;
    margin-top: 1rem;
    padding: 0.5rem;
    font-size: 1.25rem;
    img {
      width: 1rem;
      height: 1rem;
    }
    input {
      width: 80%;
      font-size: 1rem;
      border-left: 1px solid rgba(32, 67, 106, 0.20);
      padding-left: 0.5rem;
      outline: none;
    }
  }
  .add-channel-pop-submit {
    text-align: center;
    margin-top: 1rem;
    img {
      width: 11rem;
    }
  }
}

</style>
